<!-- This example requires Tailwind CSS v2.0+ -->
<section x-show="slideover" @keydown.window.escape="slideover = false" class="fixed inset-0 overflow-hidden z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
  <div class="absolute inset-0 overflow-hidden">
    {{/* Background overlay */}}
    <div @click="slideover = false" class="absolute inset-0 bg-black opacity-80" aria-hidden="true"></div>

    <div class="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
      <div
        x-show="slideover"
        x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        class="w-screen max-w-md">

        <div class="h-full flex flex-col py-6 px-4 bg-white dark:bg-dark shadow-xl overflow-y-scroll">
          <div class="flex items-start justify-between">
            <div class="ml-3 h-7 flex items-center">
              <button @click="slideover = false" class="bg-white dark:bg-dark rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-dark">
                <span class="sr-only">
                  Close docs slideover panel
                </span>

                {{/* Heroicon name: outline/x  */}}
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          </div>
          <div class="mt-4 relative flex-1 px-4">
            <div class="absolute inset-0 px-4">
              {{ partial "docs/sidebar.html" . }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>